Parent | Child | Previous | Next
 

Google Map Alternate View

IN THIS PAGE

Description

The basic settings for Google Map Alternate Views are documented in Web Grid Alternate Views.

Videos

Videos GM1 - GM9 and GM14 - GM16 cover Map alternate views. Videos GM10 - GM13 cover Map search parts

  • Google Maps/Alternate Views-Introduction

    Grids have a property called 'Alternate Views'. An Alternate View is simply another way of displaying the data in the Grid. You can define custom Alternate View (using Xbasic), or you can use one of the built-in Alternate Views. The most commonly used built-in Alternate View is a Google Map. This is used to plot the data displayed in the Grid as markers on a Google Map. The following videos show how you can use the Google Map Alternate View in a Grid. This video show:

    • 1) Defining an Alternate View with a Google Map and showing a marker on the map for each record in the Grid.

    • 2) Defining the bubble help for each marker on the Grid so that it shows data from the corresponding record in the Grid.

  • Google Maps/Alternate View-Customizing the Marker Title and Info Box

    This video continues from video GM1. The video shows how you can customize the 'info box' for each marker on the map. The 'info box' is a small window that pops up when the user clicks on a marker. The video shows how you can put any HTML that you want in the info box and how the html can include placeholders to include data from the corresponding row in the Grid. The HTML can also include Javascript commands. In the video we show how you can insert the Javascript to open the corresponding Detail View part for the current record.

  • Google Maps/Alternate View-Dynamic Marker Icons-Alternate View Layout Options

    This video continues from GM2. The video shows how the icon for each marker that is placed on the map can be dynamically specified. So, for example, if record 1 in the Grid was for a customer with a low credit rating, the corresponding icon on the map might be red. If record 2 was for a customer with a high credit rating, the corresponding icon on the map might be green. In the video we have a Grid based on our sample Airports table and we show how a different map icon is used depending on the elevation of each airport shown in the Grid. The video also discusses the different ways in which the Alternate Views can be shown on the Grid. Alternate Views can be shown in Tabs, or they can be shown on the main page, alongside the main Grid.

  • Google Maps/Alternate View-More Alternate View Layout Options

    This video continues from GM3. The video shows more options for how the Alternate Views and the main Grid can be displayed on the page. It shows how you can display the Alternate Views in accordions, tabs or on the main page. The video shows how you can even suppress the display of the main Grid part and only show the Alternate view. In the video, we show the map, with a marker for each row in the Grid. The Grid itself is hidden. However, when the user clicks on a marker, the Detail View for the current row in the (hidden) Grid is shown.

  • Google Maps/Alternate Views-Dynamic Marker Circles

    When you place a marker on a map you have control over the marker icon, bubble help and info box text. You can also draw a circle around the marker and you can control the color of the circle and the shading of the interior of the circle. The circle and its color can be used to convey information about the corresponding record in the Grid. The ability to draw a circle around the marker could be used to indicate the service area of a branch location. Or it might be used to represent the relative price of a house in a real estate application. For example,for more expensive houses you might draw a larger circle around the marker on the map. In this video, which shows a Grid based on the sample Airports database, we draw a circle around each marker on the map. The radius of the circle is proportional to the airport's elevation.

  • Google Maps/Alternate Views-Dynamic Images and Image Sequences

    When you place a marker on a Google Map, you have full control over the icon that is used. You can specify an expression that evaluates to the icon name to use for the marker. Or, you can specify an Xbasic function that will get called for each row in the Grid. The function can compute the marker icon based on the data in the current Grid row. You can also use built in image sequences. An image sequence is a set of numbered icons. In this video we show how you can use an image sequence in the map and also use the same sequence in the Grid itself. This makes it very easy for the user to see a record in the Grid and immediately locate the corresponding marker on the map.

  • Google Maps - Layers

    When you place a marker on a Google Map you can assign the marker a logical 'layer' name. For example the layer name for a marker could be 'High Risk', or 'Medium Risk', etc. Then using the automation features on the map that Alpha exposes, you can hide and show different layers on the map. For example, you might put a checkbox control on your Grid with these entries: High risk, Medium risk and Low risk. Then when the user checked or unchecked an entry, your Javascript automation code could hide or show the markers in the corresponding map layer. In this video we show how we have defined a map with 3 logical layers= - 'layer1', 'layer2' and 'layer3'. When each marker is placed on the map is is assigned to one of these layers. In the example, the rule for assigning a marker to a particular layer is contrived - if the marker is for a record in the first 3 rows of the Grid, it is in 'level1', and so on. Obviously, in a real application you would have more realistic rules for assigning markers to different map layers. Then, we put a checkbox control in a free-form region of the grid to control which layers as shown. We also show how the markers in a particular layer can be animated to draw attention to them.

  • Google Maps - Animating Markers

    When markers are placed on a Google Map, you can specify that the markers should be animated as they are placed on the map. Two animation modes are supported: Drop and Bounce. The video shows how to use the animation effects. You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a Grid row and cause the corresponding marker on the map to bounce.

  • Google Maps/Alternate Views-Treating the Map as a Blank Canvas so that the Markers on the Map can be Added Programmatically

    In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code. This video shows how you can turn off the automatic placement of markers on the map and then use Action Javascript to add markers to the map programmatically. The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the Grid row, an Ajax callback is made to place the markers on the map.

  • Search Part - Geography Searches - Google Maps

    Certain SQL databases (such as SQL Server, Oracle, DB2, MySQL, Postgres) support a special data type called 'Location'. If a table has a location field (which contains information about a record's position - latitude and longitude), then you can perform 'geography' searches. For example, you can find all records that are within x miles of a certain location, or all records that fall within an area marked by the latitude and longitude of 3 or more points. You can put a Google Map in the Search part of the Grid to make specifying geography searches easy. This video shows how you can put a Google Map into the Search Part and how Alpha Anywhere automatically generates the Portable SQL to query the database. The video demonstrates both 'location' and 'radius' searches.

  • Search Part - Geography Searches - Google Maps - Show Search Results on Screen

    This video continues from GM10. When you have a Google Map in the Search Part of a Grid you can use the Map to mark a search polygon or radius, as shown in the previous video. However, you can also display markers on the map to show the location of the records found by the search. In this video we show how the search results can be plotted on the map. A marker is placed on the map for each record found by the search. The video shows how you can customize the bubble help, title and info box for each marker that is placed on the map. The video also shows how the click action for each marker can be customized - you can use a built-in action, such as 'open Detail View', or you can define your own Javascript.

  • Search Part - Radius Search - Sorting result by distance from the map center point.

    When you do a radius search (i.e. find all records with a certain distance of a map center point), it can be useful to order the records by distance from the map center point. This video shows how this is easily done.

  • How to use a Grid to implement a typical 'Store Finder' application.

    A typical pattern often seen in web applications is a 'store finder' The user enters his location and clicks a button and a list of store branches that are closest to his location is retrieved. In this video we show how this type of application is easily built using a Grid component with a Search Part.

    To get a complete summary of how the Grid was configured for this example, see below.

  • Shows how to Update the Latitude and Longitude in the current Grid row when a Marker in the Map is dragged to a new Location.

    In this video we show how the latitude and longitude value in the current Grid row can be updated when the user drags the marker to a new position on the map.

  • Updating a Geography data type field automatically when a Longitude or Latitude Field is Changed

    In order to perform a Geography search on a table, the table must have a special 'Geography' field (supported in certain SQL databases, such as SQL Server, MySQL, Oracle, PostgreSQL, DB2, etc.). The Geography field is a special type of field that contains binary data, so you can't update its value as easily in your SQL INSERT or UPDATE statement as you can for regular fields. However, it is highly desirable to automatically update the value in the Geography fields in a record whenever a longitude or latitude value is changed. This video shows how this is easily accomplished in a Grid component. Alpha Anywhere automatically generates the appropriate Portable SQL statement to update the Geography field whenever there are changes to the longitude or latitude field on which the Geography field is based.

  • Shows how a New Marker Can be Added to a Map When Entering New Records to a Grid

    When you add a new record to a Grid, instead of asking the user to manually enter a value into the latitude and longitude fields in the new record, it might be desirable to allow the user to right click on the map at a specific location and then automatically set the value of the longitude and latitude field in the row with the position of the marker that was added to the map. Also, once the marker has been added, the user can drag the marker to a new location and the latitude and longitude fields in the new record will be updated. (Requires build 3838 or above)

How the Grid Was Configured in Video GM13

  1. Grid Properties

    To place the Search Part to the Left of the Grid part, check the 'Use a master layout template' property and set the 'Master layout template style' to 'Table - Horizontal Layout'.

  2. Search Properties

    To turn off the Search Part toolbar, in 'Search Options' set the 'Toolbar position' to 'none'.

  3. Search Field Property

    To turn off the label that appears to the left of the map, select the map field and set the 'Row label' to blank.

  4. Map Properties - These are the properties that were set for the Map field in the Search Part

    The {toolbarParts.centerMapPrompt} placeholder represents the textbox where the user types in the address on which the map should be centered. This placeholder also includes the button that the user clicks to do the action. The {toolbarParts.setRadius} placeholder represents the prompt where the user enters the search radius and the button that the user clicks to set a new radius on the map. In this application, we don't want to display this prompt or show the 'Set' button because we have hard-coded the search to use a 10 mile radius. However, we can't simply leave the prompt out of the toolbar because then the search will fail. That's because when the search is executed the radius of the search area needs to be submitted to the server and if the radius field is not in the Search Part, no radius value is submitted. Therefore we MUST include the {toolbar.setRadius} placeholder, but we can hide it, which we do by wrapping it in tags and setting the style on the to display:none.

  5. Javascript

    In the Javascript Functions section, define this event: 

    function userSetRadius() {
    {grid.Object}.submitSearchForm()
}

  6. Icons in the Grid

    To place icons in the Grid so that there is matching icon in each Grid row to the icons shown in the Search Part, go to the Grid, Fields section and click the 'Insert...' hyperlink. Insert a new 'Image' control and set the image to use the same built-in image sequence as the Search Part.

See Also